<template>
  <div class="card flex-col">
    <div class="card-title">业主数量</div>
    <div class="card-count">{{ resData.totalNum }}</div>
    <div class="card-increase">本月新增 {{ resData.monthNum }}</div>
    <el-table
      :data="tableData"
      style="width: 100%"
      max-height="280"
      class="card-table"
    >
      <el-table-column prop="name" label="姓名" align="center" />
      <el-table-column label="房产" prop="houseNum" align="center">
        <template slot-scope="scope">
          <span class="real-estate-num" @click="handleClick(scope.row.name)">
            {{ scope.row.houseNum }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createdTime"
        label="添加时间"
        min-width="100"
        align="center"
      >
        <template slot-scope="scope">
          {{ formatDot(scope.row.createdTime) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="source"
        label="来源"
        align="center"
        min-width="80"
        :formatter="ownerSourceFormatT"
      />
    </el-table>
  </div>
</template>

<script>
import { ownerNum } from '@/api/dashboard'
import {
  formatDot,
  houseSourceFormat,
  ownerSourceFormatT
} from '@/utils/common'
export default {
  data() {
    return {
      formatDot,
      houseSourceFormat,
      ownerSourceFormatT,
      resData: {},
      tableData: []
    }
  },
  created() {
    this.getOwnerNum()
  },
  methods: {
    async getOwnerNum() {
      var res = await ownerNum()
      if (res.code === 200) {
        this.resData = res.data
        this.tableData = this.resData.addressList
      }
    },
    // handleFromType(type) {
    //   const from = ['其他来源', '朋友介绍']
    //   if (type === 1) {
    //     return from[1]
    //   }
    // }
    handleClick(name) {
      const routerURl = this.$router.resolve({
        path: '/house/page',
        query: { owner: name }
      })
      window.open(routerURl.href, '_blank')
    }
  }
}
</script>
<style lang="scss">
.card-table {
  & thead {
    color: #010101;
  }
}
</style>

<style lang="scss" scoped>
.card {
  padding: 20px;
  border-radius: 4px;
  text-align: center;
  border: 1px solid rgba(221, 221, 221, 100);
  min-height: 492px;
}

.card-title {
  color: #414141;
  font-size: 16px;
  text-align: left;
  font-weight: bold;
}

.card-count {
  margin-top: 27px;
  color: #414141;
  font-size: 36px;
  font-weight: bold;
}

.card-increase {
  margin: 10px auto 56px;
  color: #414141;
  font-size: 16px;
}

.table-address {
  position: relative;
  margin: 0;
  color: #4e7afb;
  max-height: 40px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.real-estate-num {
  color: #5ac6b7;
  cursor: pointer;
}
</style>
